<template>
  <div class="home">
    <div class="banner">
      <!-- banner -->
      <Banner :src="Src1"></Banner>
    </div>
    <div class="tuijian">
      <!-- 精品推荐 -->
      <ListHead :src="tuijian" title="精品推荐" :did="1"></ListHead>
      <!-- 精品推荐的列表 -->
      <GoodList :arr="jpList"></GoodList>

      <!-- 热门兑换 -->
      <ListHead :src="hot" title="热门兑换" :did="2"></ListHead>
      <!-- 广告 -->
      <Banner :src="ad" class="banner2"></Banner>
      <!-- 热门兑换的列表 -->
      <GoodList :arr="rmList"></GoodList>
    </div>
    <!-- 积分攻略 -->
    <ListHead :src="integral" title="积分攻略" :ismore="true"></ListHead>
    <GondLue></GondLue>
  </div>
</template>


<script>
// @ is an alias to /src
import Banner from "../components/home/Banner.vue";
import GoodList from "../components/home/GoodList.vue";
import ListHead from "../components/home/ListHead.vue";
import GondLue from "../components/home/GondLue.vue";
import Src1 from "../assets/images/home/banner.png";
import ad from "../assets/images/home/ad.png";
import tuijian from "../assets/images/home/Recommend.png";
import hot from "../assets/images/home/hot.png";
import integral from "../assets/images/home/integral.png";
import { getRecommendApi, getHotListApi } from "../http/api";
export default {
  name: "Home",
  data() {
    return {
      // 作为当前的属性
      Src1,
      ad,
      tuijian,
      hot,
      integral,
      jpList: [],
      rmList: [],
    };
  },
  components: {
    Banner,
    GoodList,
    ListHead,
    GondLue,
  },
  created() {
    // 要调用出来得
    this.getJpData();
    this.gethot();
  },
  methods: {
    async getJpData() {
      // const res = await getRecommendApi();
      const { data } = await getRecommendApi();
      // console.log(res.data.data.records);
      // this.jpList = res.data.data.records.map((e) => {
      //   e.coverImg = `https://sc.wolfcode.cn` + e.coverImg;
      //   return e;
      // });
      this.jpList = data.data.records;
      // console.log(this.jpList);
    },
    async gethot() {
      // const res = await getHotListApi();
      const { data } = await getHotListApi();
      // console.log(res.data.data.records);
      // this.rmList = res.data.data.records.map((e) => {
      //   e.coverImg = `https://sc.wolfcode.cn` + e.coverImg;
      //   return e;
      // });
      this.rmList = data.data.records;
      // console.log(this.jpList);
    },
  },
};
</script>

<style lang="less">
.home {
  .banner {
    padding-bottom: 15px;
  }
  .tuijian {
    background-color: #f5f5f5;
  }
  .banner2 {
    margin-top: 30px;
  }
}
</style>